<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>简介 | epg-focus-vue</title>
    <meta name="description" content="主要应用于电视端焦点交互">
    <meta name="generator" content="VuePress 1.4.0">
    <meta name="theme-color" content="#3eaf7c">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/epg-focus/assets/css/0.styles.33941019.css" as="style"><link rel="preload" href="/epg-focus/assets/js/app.b31e66c6.js" as="script"><link rel="preload" href="/epg-focus/assets/js/2.20e6004e.js" as="script"><link rel="preload" href="/epg-focus/assets/js/3.7cc2bdd4.js" as="script"><link rel="prefetch" href="/epg-focus/assets/js/10.2514fb4c.js"><link rel="prefetch" href="/epg-focus/assets/js/11.793ea926.js"><link rel="prefetch" href="/epg-focus/assets/js/12.01e4e231.js"><link rel="prefetch" href="/epg-focus/assets/js/13.1423ccd0.js"><link rel="prefetch" href="/epg-focus/assets/js/14.115308bc.js"><link rel="prefetch" href="/epg-focus/assets/js/15.8399aeea.js"><link rel="prefetch" href="/epg-focus/assets/js/16.bd815638.js"><link rel="prefetch" href="/epg-focus/assets/js/17.dd77a29f.js"><link rel="prefetch" href="/epg-focus/assets/js/18.ae87f8b0.js"><link rel="prefetch" href="/epg-focus/assets/js/19.c6e425a9.js"><link rel="prefetch" href="/epg-focus/assets/js/20.5dd0cf52.js"><link rel="prefetch" href="/epg-focus/assets/js/21.b87d0d78.js"><link rel="prefetch" href="/epg-focus/assets/js/22.5709ae7e.js"><link rel="prefetch" href="/epg-focus/assets/js/23.1c381a02.js"><link rel="prefetch" href="/epg-focus/assets/js/24.a133fc1f.js"><link rel="prefetch" href="/epg-focus/assets/js/25.d262c8d0.js"><link rel="prefetch" href="/epg-focus/assets/js/26.825a6650.js"><link rel="prefetch" href="/epg-focus/assets/js/27.57eb15d3.js"><link rel="prefetch" href="/epg-focus/assets/js/28.5b056900.js"><link rel="prefetch" href="/epg-focus/assets/js/4.82f74d64.js"><link rel="prefetch" href="/epg-focus/assets/js/5.fe38ea94.js"><link rel="prefetch" href="/epg-focus/assets/js/6.0d7ca19c.js"><link rel="prefetch" href="/epg-focus/assets/js/7.4478646a.js"><link rel="prefetch" href="/epg-focus/assets/js/8.0d360ba2.js"><link rel="prefetch" href="/epg-focus/assets/js/9.40007ddf.js">
    <link rel="stylesheet" href="/epg-focus/assets/css/0.styles.33941019.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/epg-focus/" class="home-link router-link-active"><!----> <span class="site-name">epg-focus-vue</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/epg-focus/guide/" class="nav-link router-link-exact-active router-link-active">
  引导
</a></div><div class="nav-item"><a href="/epg-focus/v1/" class="nav-link">
  v1
</a></div><div class="nav-item"><a href="/epg-focus/v2/" class="nav-link">
  v2
</a></div><div class="nav-item"><a href="/epg-focus/v3/" class="nav-link">
  v3
</a></div><div class="nav-item"><a href="https://gitee.com/wyzhgx/focus-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
  gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://www.npmjs.com/package/epg-focus-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/epg-focus/guide/" class="nav-link router-link-exact-active router-link-active">
  引导
</a></div><div class="nav-item"><a href="/epg-focus/v1/" class="nav-link">
  v1
</a></div><div class="nav-item"><a href="/epg-focus/v2/" class="nav-link">
  v2
</a></div><div class="nav-item"><a href="/epg-focus/v3/" class="nav-link">
  v3
</a></div><div class="nav-item"><a href="https://gitee.com/wyzhgx/focus-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
  gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://www.npmjs.com/package/epg-focus-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="简介"><a href="#简介" class="header-anchor">#</a> 简介</h1> <p><code>epg-focus-vue</code>插件是基于 VUE 开发的，可应用于使用遥控、键盘等外设控制元素节点获焦失焦的场景的插件。根据焦点元素所在页面的坐标及尺寸就近移动页面焦点。</p> <h2 id="版本差异"><a href="#版本差异" class="header-anchor">#</a> 版本差异</h2> <h3 id="_1-x-版本"><a href="#_1-x-版本" class="header-anchor">#</a> 1.x 版本</h3> <ol><li>该版本基于 vue2、vue-router 开发；</li> <li>在布局上，如果水平方向没有交集，则视为上下层布局；</li> <li>该版本不支持划定区域<code>group</code>中嵌套<code>group</code>区域的布局方式；</li> <li>该版本不支持入口<code>app.vue</code>文件中的<code>routeview</code>外存在固定<code>items</code>节点；</li> <li>按键响应相关键值请参考<a href="/epg-focus/v1/event.html">按键事件</a>，暂不支持配置；</li> <li>与路由的 keepAlive 相关内容关联性差；</li> <li>嵌套路由视图、命名视图兼容异常。</li></ol> <h3 id="_2-x-版本"><a href="#_2-x-版本" class="header-anchor">#</a> 2.x 版本</h3> <ol><li>该版本基于 vue2、vue-router、vueX 开发；</li> <li>使用<code>getBoundingClientRect</code>获取焦点位置，重构焦点计算方法；</li> <li>变更插件部分属性方法；</li> <li>在布局上，如果水平方向没有交集，则视为上下层布局；</li> <li>该版本支持划定区域<code>group</code>中嵌套<code>group</code>区域的布局方式，节点的<code>data-group</code>属性仅需指向直属<code>group</code>即可；</li> <li>按键 Maps 可配置，且支持长按操作交互；</li> <li>增加路由<code>keepAlive</code>相关处理逻辑，并支持嵌套路由视图以及命名路由视图；</li> <li>必要情况下可以使用<code>group</code>矫正区域划定，来完成对应方向上的焦点移动；</li> <li>支持配置进入/退出休眠模式。</li></ol> <h3 id="_3-x-版本"><a href="#_3-x-版本" class="header-anchor">#</a> 3.x 版本</h3> <ol><li>该版本基于 typescript、vue3、vue-router、pinia 开发；</li> <li>包含 2.x 版本所有功能；</li> <li>重定义 group、sign 等属性的定义赋值形式，将原有 dataset 形式改为自定义指令修饰符形式；</li> <li>增加鼠标悬停及点击的响应逻辑；</li> <li>变更插件部分属性方法；</li> <li>重构路由视图区域间焦点移动逻辑；</li> <li>不同命名视图中焦点响应方法可以自定义。</li></ol> <h2 id="焦点管理"><a href="#焦点管理" class="header-anchor">#</a> 焦点管理</h2> <p>焦点的注册、更新、删除与自定义指令所绑定的元素节点的挂载、更新、移除相对应；</p> <ol><li>节点绑定</li> <li>判断所属区域，进入对应区域处理逻辑</li> <li>根据<code>data-popup</code>属性，进入默认层级或自定义层级处理（对应 3.x 版本的 popup）</li> <li>根据<code>data-group</code>属性，将节点推入默认列表或自定义的 group 列表（对应 3.x 版本的 group）</li> <li>根据<code>data-sign</code>属性，同时将节点推入相关的标记列表（对应 3.x 版本的 sign）</li> <li>节点数据更新时，直接调用节点更新逻辑更新绑定数据对象</li> <li>节点移除时，从对应列表中将该节点移除</li></ol> <p><img src="/epg-focus/assets/img/focus.3e4cd02f.png" alt="焦点注册过程" title="焦点注册过程"></p> <h2 id="移动规则"><a href="#移动规则" class="header-anchor">#</a> 移动规则</h2> <ol><li>两个焦点水平方向上无交集，则通过上下移动切换焦点；</li> <li>两个交点水平方向上有交集，则可以通过左右移动切换焦点；</li> <li>就近原则；优先移动到指定方向最近的一个焦点；</li> <li>交集多的优先原则；如果多个焦点满足就近原则，优先移动到交集更多的焦点；</li> <li>左/上优先原则；在焦点移动过程中，如果多个焦点到该焦点最近距离相等，则优先移动到左/上侧的焦点；</li> <li>右/下优先原则；以任意基准点作参考，查询焦点时，如果多个焦点到该基准点最近距离相等，则优先移动到右/下侧的焦点</li> <li>从一个焦点移动到新的区域或 group 范围时；向右/下移动到新区域，移动到区域内左上角的焦点，向左移动到新区域，移动到区域内右上角的焦点，向上移动到新区域，移动到区域内左下角的焦点；</li> <li>在实际应用中，如果节点实际尺寸未小数，有可能会引起焦点移动异常；这是由于在获取焦点尺寸位置是均为整数，而引起的数值计算上的位置重叠引起的，因此建议两节点之间至少间隔<code>1px</code>或者布局尺寸使用整数，来避免计算异常问题。</li></ol> <p><img src="/epg-focus/assets/img/rules.d1e2b14d.png" alt="焦点移动规则" title="焦点移动规则"></p> <h2 id="页面布局"><a href="#页面布局" class="header-anchor">#</a> 页面布局</h2> <p>最新版本的插件优化了对嵌套路由、命名路由视图使用的支持，页面布局区域划分规则如图：<br> <img src="/epg-focus/assets/img/views.444e9f0d.png" alt="epg-focus-vue页面结构划分" title="epg-focus-vue页面结构划分"></p> <h3 id="_1、区域划分"><a href="#_1、区域划分" class="header-anchor">#</a> 1、区域划分</h3> <p>根据<code>Vue Router</code>的相关应用，对页面的视图区域划分为三种区域：</p> <ul><li>公共区域：页面模版<code>router-view</code>外的区域</li> <li>命名路由区域：页面 router</li></ul> <h3 id="_2、区域层级划分"><a href="#_2、区域层级划分" class="header-anchor">#</a> 2、区域层级划分</h3> <p>页面中通过给含有相关自定义指令的节点添加<code>data-popup</code>属性来区分不同焦点所属层级，用于区分弹层焦点与普通页面焦点。（对应 3.x 版本的 popup）</p> <ul><li>默认层级：未定义<code>data-popup</code>属性或<code>data-popup</code>属性为空字符串</li> <li>自定义层级：定义<code>data-popup</code>属性（属性值为字符串）</li></ul> <h3 id="_3、层级池管理"><a href="#_3、层级池管理" class="header-anchor">#</a> 3、层级池管理</h3> <p>层级池中包含焦点列表和多个自定义的 group 列表以及自定义的标记列表，对应关系如图：<br> <img src="/epg-focus/assets/img/pools.f1f456d1.png" alt="epg-focus-vue 区域层级池" title="epg-focus-vue 区域层级池"></p> <h2 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h2> <p><a href="https://gitee.com/wyzhgx/vuepages" target="_blank" rel="noopener noreferrer">应用示例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/epg-focus/assets/js/app.b31e66c6.js" defer></script><script src="/epg-focus/assets/js/2.20e6004e.js" defer></script><script src="/epg-focus/assets/js/3.7cc2bdd4.js" defer></script>
  </body>
</html>
